﻿layui.define(['table', 'laypage', 'jquery', 'element'], function (exports) {
    "use strict";

    var MOD_NAME = 'card',
        $ = layui.jquery,
        element = layui.element,
        laypage = layui.laypage;

    var pearCard = function (opt) {
        this.option = opt;
    };

    pearCard.prototype.render = function (opt) {
        var option = {
            // 构建的模型
            elem: opt.elem,
            // 数据 url 连接
            url: opt.url,
            // lineSize 每行的个数
            lineSize: opt.lineSize ? opt.lineSize : 4,
            // 共多少个
            pageSize: opt.pageSize ? opt.pageSize : 12,
            // 当前页
            currentPage: opt.currentSize ? opt.currentSize : 0,
            // 完 成 函 数
            done: opt.done ? opt.done : function () {
                alert("跳转页面");
            }
        }
        // 根 据 请 求 方 式 获 取 数 据
        if (option.url != null) {
            // 复制数据
            option.data = getData(option.url).data;
        }

        // 根据结果进行相应结构的创建
        var html = createComponent(option.data);

        $(option.elem).html(html);

        // 初始化分页组件
        laypage.render({
            elem: 'cardpage'
            , count: 100
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj) {
                console.log(obj)
            }
        });

        return new pearCard(option);
    }

    function createComponent(data) {
        var html = "<div class='pear-card-component'>"
        var content = createCards(data);
        var page = "<div id='cardpage'></div>"
        content = content + page;
        html += content + "</div>"
        return html;
    }


    /** 创建指定数量的卡片 */
    function createCards(data) {

        var content = "<div class='layui-row layui-col-space30'>";
        $.each(data, function (i, item) {

            content += createCard(item);

        })
        content += "</div>"
        return content;
    }


    /** 创建一个卡片 */
    function createCard(item) {

        var card =
            '<div class="layui-col-md3 ew-datagrid-item" data-index="0" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="' + item.image + '"> <div class="project-list-item-body"> <h2>' + item.title + '</h2> <div class="project-list-item-text layui-text">' + item.remark + '</div> <div class="project-list-item-desc"> <span class="time">' + item.time + '</span> <div class="ew-head-list"> <img class="ew-head-list-item" lay-tips="曲丽丽" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="ew-head-list-item" lay-tips="王昭君" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="ew-head-list-item" lay-tips="董娜娜" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div> </div> </div> </div> </div>'

        return card;
    }

    /** 同 步 请 求 获 取 数 据 */
    function getData(url) {

        $.ajaxSettings.async = false;
        var data = null;

        $.get(url, function (result) {
            data = result;
        });

        $.ajaxSettings.async = true;
        return data;
    }

    exports(MOD_NAME, new pearCard());
});
